$(function () {
    let carousel=$class("carousel",document)[0];
    let ul=$tag("ul",carousel)[0];
    let imgLis=$tag("li",ul);
    let ol=$tag("ol",carousel)[0];
    let indexLis=$("ol div");
    let pic=$class("pic",carousel)[0];
    let goLeft=$class("left",pic)[0];
    let goRight=$class("right",pic)[0];
    let index=0;//代表当前处于第几张图片
    let leftbar_ac=0;
    let flag=true;
    let match_ac;//记录搜索匹配框当前选择行
    let m_crousal_index=0;//为你推荐部分轮播记录变量
    /*============================================================================================================*/
    //轮播实现
    for(let i=0;i<indexLis.length;i++){
        indexLis[i].index=i;
        indexLis[i].onclick=(function () {
            if(flag) {
                flag=false;
                let _this = this;
                indexLis[index].className = "";
                this.className = "ac"
                move(imgLis[index], {"opacity": 0});
                move(imgLis[_this.index], {"opacity": 100}, function () {
                    index = _this.index;
                    flag = true;
                });
            }
        })
    };
    //轮播左翻按钮点击事件
    goLeft.onclick=function () {
        if(flag) {
            flag=false;
            indexLis[index].className = "";
            move(imgLis[index], {"opacity": 0});

            index--;

            if(index==-1){
                index=imgLis.length-1
            }
            indexLis[index].className = "ac";
            move(imgLis[index], {"opacity": 100}, function () {
                flag = true;
            });
        }
    };
    //轮播右翻按钮点击事件
    goRight.onclick=function () {
        if(flag) {
            flag=false;
            indexLis[index].className = "";
            move(imgLis[index], {"opacity": 0});
            index++;
            if(index==imgLis.length){
                index=0
            }
            indexLis[index].className = "ac";
            move(imgLis[index], {"opacity": 100}, function () {
                flag = true;
            });
        }
    };
    //触发右翻事件实现自动轮播
    pic.timer=setInterval(function () {
        goRight.onclick();
    },2000)
    //鼠标移入轮播区域，停止轮播
    pic.onmouseover=function(){
        clearInterval(pic.timer);
    };
    //鼠标离开轮播区域，开始自动轮播
    pic.onmouseleave=function () {
        pic.timer=setInterval(function () {
            goRight.onclick();
        },2000)
    };
    /*============================================================================================================*/
    //左侧导航栏鼠标悬停效果
    $(".left-bar li").on("mouseover",function () {
        //请求数据渲染左侧导航栏
        $.get("http://rap2api.taobao.org/app/mock/162963/example/1553174975978",function (data) {
            let html="";
            data.res.forEach(function (curr) {
                html+=` <div class="list">
                        <div>
                            <a href=""><img src="image/mi9-80.png" />${curr.des}</a>
                        </div>
                    </div>`;
            })
            $(".h-bar").html(html);
        });
        //显示隐藏的列表框
        $(".h-bar").removeClass("hidden");
    });
    //鼠标离开时隐藏
    $(".carousel").on("mouseleave",function () {
        $(".h-bar").addClass("hidden");
    });
    /*============================================================================================================*/
    //请求数据渲染主体内容部分
    $.get("http://rap2api.taobao.org/app/mock/162963/get-main-content",function (data) {
        let html=["","","","",""];
        for(let i=0;i<data.res.length;i++){
            let length=data.res[i].list.length;
            for(let j=0;j<length-1;j++){
                html[i]+=template("goods",data.res[i].list[j]);
            }
            html[i]+=` <div class="last">
                    <div class="lastP">
                        <a href="">
                            <h3>${data.res[i].list[length-1].good_title}</h3>
                            <p></p>
                            <p>
                                <span class="price1">${data.res[i].list[length-1].good_price}元</span>
                                <span class="price2"></span>
                            </p>
                        </a>
                        <a href="#"><img src="image/jdrmlast.jpg" /></a>
                    </div>
                    <div class="more">
                        <a href="">
                            <h3>浏览更多</h3>
                            <p>热门</p>
                        </a>
                        <i class="iconfont icon-youjiantou"></i>
                    </div>
                </div>`;
        }
        $(".second-mp-right").prepend(html[0]);
        $(".third-mp-right").prepend(html[1]);
        $(".fourth-mp-right").prepend(html[2]);
        $(".five-mp-right").prepend(html[3]);
        $(".six-mp-right").prepend(html[4]);
    });
    /*============================================================================================================*/
    //主体内容各部分头部鼠标悬停效果
    let head_manu_ac=[0,0,0,0,0];
    $(".m-head ul li").on("mouseenter",function () {
        const _this=this;
        let i=$(this).parents(".ancestors").attr("data-index")
        $(this).parent().parent().find("li").eq(head_manu_ac[i]).find("a").removeClass("head-manu-ac");
        head_manu_ac[i]= $(this).index();
        $(this).find("a").addClass("head-manu-ac");
        //访问数据进行渲染
        let html="";
        $.get("http://rap2api.taobao.org/app/mock/162963/get-part-content",function (data){
            let length=data.list.length;
            for(let j=0;j<length-1;j++){
                html+=template("goods",data.list[j]);
            }
            html+=`<div class="last">
                    <div class="lastP">
                        <a href="">
                            <h3>${data.list[length-1].good_title}</h3>
                            <p></p>
                            <p>
                                <span class="price1">${data.list[length-1].good_price}元</span>
                                <span class="price2"></span>
                            </p>
                        </a>
                        <a href="#"><img src="image/jdrmlast.jpg" /></a>
                    </div>
                    <div class="more">
                        <a href="">
                            <h3>浏览更多</h3>
                            <p>热门</p>
                        </a>
                        <i class="iconfont icon-youjiantou"></i>
                    </div>
                </div>`;

            $(_this).parent().parent().parent().find("[data-name='part-content']").html(html);
        });
    })
    /*============================================================================================================*/
    //为你推荐部分轮播效果(向后)
    $(".changepage .next").on("click",function(){
        if(m_crousal_index>=0&&m_crousal_index<3) {
            m_crousal_index++;
            $(".m-crousal ul").animate({
                "margin-left":m_crousal_index*-1240
            },500,function () {
                if(m_crousal_index==0) {
                    $(".changepage .pre").addClass("cantuse");
                }
                else if(m_crousal_index==3) {
                    $(".changepage .next").addClass("cantuse");
                }
                else{
                    $(".changepage .pre").removeClass("cantuse");
                    $(".changepage .next").removeClass("cantuse");
                    $(".changepage .pre").addClass("canuse");
                    $(".changepage .next").addClass("canuse");
                }
            });
        }
    });
    //为你推荐部分轮播效果(向前)
    $(".changepage .pre").on("click",function(){
        if(m_crousal_index>0&&m_crousal_index<=3) {
            m_crousal_index--;
            $(".m-crousal ul").animate({
                "margin-left":m_crousal_index*-1240
            },500,function () {
                if(m_crousal_index==0) {
                    $(".changepage .pre").addClass("cantuse");
                }
               else if(m_crousal_index==3) {
                    $(".changepage .next").addClass("cantuse");
                }
               else {
                    $(".changepage .pre").removeClass("cantuse");
                    $(".changepage .next").removeClass("cantuse");
                    $(".changepage .pre").addClass("canuse");
                    $(".changepage .next").addClass("canuse");
                }
            });

        }
    });
    /*============================================================================================================*/
    // 内容部分轮播效果
    let cont_index=[0,0,0,0]
    //内容部分图书块轮播效果(向后)
    $(".content-box .content").on("click",".next",function(){
        let i=$(this).parent().index();
        if(cont_index[i]>=0&&cont_index[i]<2) {
            //
            $(this).siblings(".pages").find("li").eq(cont_index[i]).find("div").removeClass("out").addClass("inner");
            cont_index[i]++;
            $(this).siblings(".pages").find("li").eq(cont_index[i]).find("div").removeClass("inner").addClass("out");
            $(this).parent().find(".main-content").animate({
                "margin-left":cont_index[i]*-296
            },500);
        }
    });
    //内容部分图书块轮播效果(向前)
    $(".content-box .content").on("click",".pre",function(){
        let i=$(this).parent().index();
        if(cont_index[i]>0&&cont_index[i]<=2) {
            $(this).siblings(".pages").find("li").eq(cont_index[i]).find("div").removeClass("out").addClass("inner");
            cont_index[i]--;
            $(this).siblings(".pages").find("li").eq(cont_index[i]).find("div").removeClass("inner").addClass("out");
            $(this).parent().find(".main-content").animate({
                "margin-left":cont_index[i]*-296
            },500);
        }
    });
    //点击小圆点实现轮播
    $(".pages li").on("click",function () {
        let index=$(this).index();
        $(this).siblings("li").find("div").removeClass("out").addClass("inner");
        $(this).find("div").addClass("out").removeClass("inner")
        $(this).parent().parent().find(".main-content").animate({
            "margin-left":index*-296
        },500);

    });
    /*============================================================================================================*/
    //回到顶部按钮的出现与消失
    $(window).scroll(function () {
        if($(window).scrollTop()==0){
            $(".returntop").addClass("hidden");
        }
        if($(window).scrollTop()>=1500){
            $(".returntop").removeClass("hidden");
        }
    })
    //回到顶部操作
    $(".returntop").on("click",function(){
        $(window).scrollTop(0);
    })



});





